<template>
  <div class="xiaoxiwarp">
    <div class="header">
      <van-icon size="25" name="arrow-left" @click="back()" />
      <h3>消息列表</h3>

      <span></span>
    </div>
    <div class="list">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-tabs v-model="active">
          <van-tab title="消息">
            <van-swipe-cell v-for="(itme) in count1list" :key="itme.user_id">
              <van-cell :border="false">
                <dl @click="liaotian(itme)" class="xx">
                  <dt>
                    <img :src="itme.c_avatar" alt />
                  </dt>
                  <dd class="q1">
                    <p>{{itme.c_nickname}}</p>
                    <p class="q2">{{itme.content}}</p>
                  </dd>
                  <dd class="dd">
                    <span>{{ itme.time}}</span>
                  </dd>
                </dl>
              </van-cell>

              <template #right>
                <van-button square @click="del(itme)" type="danger" text="删除" />
                <van-button square @click="top(itme)" type="primary" text="顶置" />
              </template>
            </van-swipe-cell>
          </van-tab>

          <van-tab class="left" title="公告">
            <van-swipe-cell v-for="(itme) in count2list" :key="itme.id">
              <van-cell :border="false">
                <dl class="dl2">
                  <dt>
                    <h3>{{itme.name}}</h3>
                    <p>{{itme.createtime}}</p>
                  </dt>
                  <dd>
                    <p>{{itme.chattime}}</p>
                  </dd>
                </dl>
              </van-cell>
              <template #right>
                <van-button square @click="dels(itme)" type="danger" text="删除" />
              </template>
            </van-swipe-cell>
          </van-tab>
        </van-tabs>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import moment from "moment";
import axios from "../../utils/axios";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      active: 0,
      count1: 3,
      count2: 1,
      list: [],
      count1list:sessionStorage.getItem("aaaa")&&
                 JSON.parse(sessionStorage.getItem("aaaa")) || [],
      count2list: [],
      isLoading: false
    };
  },
  setup(props, context) {
    console.log(context);
  },
  computed: {
    ...mapState(["chat_socket"])
  },
  created() {
    this.chat_socket ||
      this.chat_socketInit(
        require("socket.io-client")("http://47.111.14.227:7001/chat")
      );
    axios.get("/message").then(res => {
      //this.count1list = res.data.list;
    });

    axios.get("/notify").then(res => {
      console.log(res.data.list, 456);
      this.count2list = res.data.list;
      // console.log(this.count2list, "haha");
    });
  },
  mounted() {
    this.socketInit();
  },
  methods: {
    ...mapMutations(["chat_socketInit"]),
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.count1list;
        this.count2 += 1;
      }, 3000);
    },
    dels(itme) {
      console.log(itme);
      this.count2list.splice(itme, 1);
    },
    del(itme) {
      console.log(itme);
      this.count1list.splice(itme, 1);
    },
    top(itme) {
      console.log(itme);

      this.count1list.splice(itme, 1);
      this.count1list.unshift(itme);
    },
    liaotian(itme) {
      this.$router.push({
        path: "/liaotian",
        query: itme
      });
    },
    back() {
      this.$router.go(-1);
    },
    socketInit() {
      const ws = this.chat_socket;
      ws.on("connecting", e => {
        console.log("正在连接...");
      });
      ws.on("connect", e => {
        console.log("服务器连接成功");
      });
      ws.on("disconnect", e => {
        console.log("与服务器断开连接");
      });
      ws.on("reconnecting", e => {
        console.log("正在重新连接");
      });
      ws.on("reconnect", e => {
        console.log("重连成功");
      });
      ws.on("reconnect_failed", e => {
        console.log("重连失败");
      });
      ws.on("notify_list", data => {
        console.log(data);
        data.time = moment(data.time).format("h:mm:ss a");
        const { c_nickname } = data;
        const ind = this.count1list.findIndex(
          item => item.c_nickname == c_nickname
        );
        if (ind !== -1) return this.count1list.splice(ind, 1, data);
        this.count1list.push(data);
        sessionStorage.setItem("aaaa", JSON.stringify(this.count1list));
      });
    }
  }
};
</script>

<style lang="less"  scoped>
.xiaoxiwarp {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header {
  color: white;
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
  background: rgb(1, 153, 241);
}
.list {
  width: 100%;
  height: 100%;
  overflow: scroll;
  .van-cell--borderless {
    padding: 0;
    overflow: hidden;
  }
  .xx {
    width: 100%;
    height: 110px;
    // height: 200px;
    align-items: center;
    justify-content: space-between;
    border: 1px #ccc solid;
    display: flex;

    dt {
      margin: 8px;
      width: 55px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    dd {
      overflow: hidden;
      white-space: nowrap;
    }
    .dd {
      margin: 0;
      width: 34%;
      flex-wrap: wrap;
    }
  }

  .van-swipe-cell {
    width: 100%;
    // border-bottom: crimson 1px solid;
  }

  .left {
    width: 100%;
    height: 100%;
    .van-swipe-cell {
      width: 100%;
      height: 100px;
    }
    dl {
      padding: 0 10px;
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      border-bottom: 1px #eee solid;
      justify-content: space-between;
    }
  }

  .van-button {
    height: 110px;
  }
  .van-swipe-cell {
    height: 110px;
    overflow: hidden;
  }
  .van-swipe-cell__right {
    height: 100px;
  }
}
.q1 {
  width: 200px;
  // background-color: crimson;
  // height: 70px;
}
.q2 {
  flex-wrap: wrap;
}
.van-pull-refresh {
  height: 100%;
}
.van-tabs van-tabs--line {
  height: 100%;
}
.left {
  width: 100%;
  dl {
    dd {
      flex-wrap: nowrap;
    }
  }
}
</style>